import 'package:flutter/material.dart';

class InvertedClipperPage extends StatelessWidget {
  const InvertedClipperPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("InvertedClipper")),
      body: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: () {
          debugPrint("click");
        },
        child: Center(
          child: ClipPath(
            clipper: InvertedRectangleClipper(),
            child: Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.red,
            ),
          ),
        ),
      ),
    );
  }
}

class InvertedRectangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    // 添加矩形路径
    path.addRect(Rect.fromLTWH(0, 0, size.width, size.height));

    // 添加取反路径
    final invertedPath = Path();
    invertedPath.moveTo(0, 0); // 移动到画布左上角
    invertedPath.lineTo(size.width / 2, 0); // 连线到画布右上角
    invertedPath.lineTo(size.width / 2, size.height / 2); // 连线到画布右下角
    invertedPath.lineTo(0, size.height / 2); // 连线到画布左下角
    invertedPath.close(); // 闭合路径

    // 取反路径和矩形路径求交集
    final clippedPath = Path.combine(PathOperation.difference, path, invertedPath);

    return clippedPath;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return false; // 因为裁剪是静态的，所以不需要重新裁剪
  }
}
